import React, { useState, useEffect,useContext } from 'react';
import { Button, Modal, Form, Input, Switch, Space, message } from 'antd';
import { getTime } from '../../../../utils/publicFun'
import { updateReason } from '../../../../api/OrderApi'
import myContext from '../../../../utils/myContext'

interface DataType {
  key: React.Key;
  appliId: number;
  reasonDescription: string;
  // sort:number;
  startUse: boolean;
  insertTime: string
}

interface PropsType {
  isEditModalOpen: boolean;
  close(): void;
  // record:DataType
  clickRow: DataType | null
}

function EditModal(props: PropsType) {
  //   const [isModalOpen, setIsModalOpen] = useState(false);
  // const [isOpen, setIsOpen] = useState<boolean>(false);
  const [form] = Form.useForm();
  console.log('propsclick', props.clickRow);
  const context =useContext<any>(myContext)
  //  
  // setIsOpen(props.clickRow?props.clickRow.isOpen:'')

  // // 确定编辑
  // const handleOk = () => {
  //   // setIsModalOpen(false);
  //      props.close()
  //      console.log('当前编辑时间',getTime());
  // };

  //   设置表单初始值
  useEffect(() => {
    form.setFieldsValue({
      desc: props.clickRow ? props.clickRow.reasonDescription : '',
      sort: props.clickRow ? props.clickRow.appliId : '',
      isOpen: props.clickRow ? props.clickRow.startUse : '',
    })
  })

  // 取消编辑
  const cancleHandle = () => {
    props.close()
  };

  // /开关切换
  const onSwitchChange = (checked: boolean) => {
    // setIsOpen(!isOpen)
    console.log('checked', checked);
  };

  // 确定编辑
  const onFinish = (values: any) => {
    // 发请求
    updateReason({
      appliId: props.clickRow?.appliId,
      insertTime: getTime(),
      reasonDescription: values.desc,
      startUse: values.isOpen == true ? 1 : 0
    }).then(res => {
      
      // if(res.code==200){
        console.log('修改成功', res);
        context.getAll()
        // 关闭添加弹框
        props.close()
        // 提示
        message.success('编辑成功')
      // }else{
         // 关闭添加弹框
        //  props.close()
        // message.info('编辑出错啦~~')
      // }
    }).catch(err => {
      console.log('err9999', err);
      message.info('服务器出错啦~~')
    })
  };

  return (
    <>
      <Modal title="编辑退换货原因" open={props.isEditModalOpen} footer={null} forceRender>
        <Form form={form}
          name="normal_login"
          className="login-form"
          onFinish={onFinish}
        >
          <Form.Item
            label='原因描述'
            name="desc"
            rules={[{ required: true, message: '请输入原因描述' }]}
          >

            <Input placeholder="原因描述" />
          </Form.Item>
          {/* <Form.Item
            label='排序'
            name="sort"
            rules={[{ required: true, message: '请输入排序' }]}
          >
            <Input
              placeholder="排序"
            />
          </Form.Item> */}
          <Form.Item
            name='isOpen'
            label='是否启用'
            rules={[{ required: true, message: 'xxx' }]}
            valuePropName="checked"
          >
            <Switch defaultChecked={props.clickRow ? props.clickRow.startUse : undefined} onChange={onSwitchChange}></Switch>
          </Form.Item>
          <Form.Item shouldUpdate>
            {() => (
              <Space wrap>
                <Button
                  type="primary"
                  htmlType="submit"
                >
                  确定
                </Button>
                <Button htmlType="button" className='orderlist_reset' onClick={cancleHandle}>
                  取消
                </Button>
              </Space>

            )}
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default EditModal;